<div>
  <img src="assets/images/shop-10.jpg" alt="门店">
  <img [src]="imgSrc" alt="百度">
  <h2>{{title}}</h2>
  <hr>
  <div>{{msg}}</div>
  <hr>
  <br>
  <div title="静态的123123">鼠标指上去</div>
  <div [title]="student">鼠标指上去，动态绑定的值</div>
  <br>
  <hr>
  <div>{{content}}</div>
  <span [innerHTML]="content"></span>
  <br>
  <hr>
  <h1>angular模板做简单运算</h1>
  <div>1+2+3={{1+2+3}}</div>
  <br>
  <hr>
  <h1>angular数据循环</h1>
  <ul>
    <li *ngFor="let item of arr">{{item}}</li>
  </ul>
  <ul>
    <li *ngFor="let item of cars; let key = index" >
      <h3>{{key+1}}---{{item.name}}</h3>
      <ul>
        <li *ngFor="let item2 of item.series;let key2 = index" [ngClass]="{'red':key2 === 0,'blue':key2===1,'orange':key2===2}">
          {{item2.title}}---{{item2.price}}W
        </li>
      </ul>
    </li>
  </ul>
  <br>
  <hr>
  <h1>angular 条件判断语句 *ngIf</h1>
  <div *ngIf="showText">通过条件判断是否显示</div>
  <br>
  <hr>
  <h1>ng-switch</h1>
  <div [ngSwitch]="flag">
    <p *ngSwitchCase="1">未支付订单</p>
    <p *ngSwitchCase="2">已支付订单</p>
    <p *ngSwitchCase="3">已发货订单</p>
    <p *ngSwitchCase="4">已收货订单</p>
    <p *ngSwitchCase="5">已取消订单</p>
    <p *ngSwitchDefault>无效订单</p>
  </div>
  <br>
  <hr>
  <h1>ngClass ngStyle</h1>
  <div [ngClass]="{'red':classFlag,'orange':!classFlag}">ngClass改变class样式</div>
  <p>ngStyle中引号表示字符串，没有引号则表示变量</p>
  <p [ngStyle]="{'color':'red'}">ngStyle改变样式</p>
  <p [ngStyle]="{'color':'blue'}">ngStyle改变样式</p>
  <p [ngStyle]="{'color':styleColor}">ngStyle改变样式</p>
  <h1>angular 管道</h1>
  <p>{{time}}</p>
  <p>{{time | date:'yyyy-MM-dd HH:mm ss'}}</p>
  <br>
  <hr>
  <h1>angular 执行方法</h1>
  <button (click)="handleClickShow()" >点击执行方法</button>
  <button (click)="handleClickRed($event)" >点击执行方法获得dom节点改变style</button>
  <br>
  <hr>
  <h1>angular 表单事件，事件对象</h1>
  <p>keyDown事件</p>
  <input type="text" (keydown)="keyDown($event)" >
  <p>keyUp事件</p>
  <input type="text" (keyup)="keyUp($event)">
  <br>
  <hr>
  <h1>双向数据绑定</h1>
  <p>显示input框内容:{{keyWords}}</p>
  <input type="text" [(ngModel)]="keyWords">
  <button (click)="handleChangeInput()">修改input值</button>
</div>
